<template>
  <div>
    <!-- <van-tabbar v-if="$route.path != '/reg' && $route.path != '/login'"> -->
    <!-- active-color: 选中的颜色 -->
    <!-- inactive-color: 未选中的颜色 -->
    <van-tabbar
      route
      v-model="active"
      active-color="#ee6f57"
      inactive-color="#000"
      v-if="!$route.meta.ishide"
    >
      <van-tabbar-item
        name="home"
        :icon="item.icon"
        v-for="item in navList"
        :key="item.id"
        tag="li"
        :to="item.path"
      >{{ item.title}}</van-tabbar-item>
      <!-- <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
        <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
      <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>-->
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "home",
      navList: [
        {
          id: 1,
          title: "首页",
          path: "/home",
          icon: "wap-home-o"
        },
        {
          id: 2,
          title: "分类",
          path: "/list", // /news
          icon: "label-o"
        },
        {
          id: 3,
          title: "客服",
          path: "/help", // /news
          icon: "smile-comment-o"
        },
        {
          id: 4,
          title: "购物车",
          path: "/cart",
          icon: "shopping-cart-o"
        },
        {
          id: 5,
          title: "个人中心",
          path: "/mine",
          icon: "contact"
        }
      ]
    };
  },

  components: {},

  methods: {},
  created() {
    console.log(this.$route, 777);
  },

  watch: {
    $route: {
      deep: true,
      handler(route) {
        console.log(route);
      }
    }
  }
};
</script>
<style scoped lang="scss">
@import "../assets/sass/appNav.scss";
</style>
